<template>
  <el-form ref="formData" :label-width="labelWidth" :model="formData" :rules="formRules">
    <el-row>
      <el-form-item label="开发结果录入：" prop="result">
        <el-input
          style="width: 61%;"
          v-model="formData.result"
          type="textarea"
          maxlength="500"
          show-word-limit
          :autosize="{ minRows: 3, maxRows: 4 }"
        />
      </el-form-item>
    </el-row>
    <el-row v-for="item in sourceList" :key="item.prop">
      <SelectNosFormItem
        :label="item.label"
        :prop="item.prop"
        :required="item.required"
        :form-items="item.formItems"
        :columns="item.columns"
        :associate-key="item.associateKey"
        :load-data="item.loadData"
        @updateNos="recordNos => {updateFormNos(item.prop, recordNos)}"
      />
    </el-row>
  </el-form>
</template>
<script>
import SelectNosFormItem from '../SelectNosFormItem';
import { getSearchParamBySearchType } from '@/utils/getUtils';
import {
  INSPECTION_FORM_ITEMS, INSPECTION_TABLE_COLUMNS,
  PRICE_FORM_ITEMS, PRICE_TABLE_COLUMNS,
  ACCESS_FORM_ITEMS, ACCESS_TABLE_COLUMNS
} from './constants';
import {
  getSupplierInspectionPagerService,
  getRecordPagerService,
  querySpuListService
} from '@/api/commodity/developmentRequirementPlan/developPlan';
export default {
  components: {
    SelectNosFormItem
  },
  props: {
    labelWidth: {
      type: String,
      default: '130px'
    }
  },
  data () {
    return {
      formData: {},
      formRules: {
        result: [{ required: true, trigger: 'change', message: '开发结果不能为空' }],
      },
      sourceList: [
        {
          label: '供应商考察报告',
          prop: 'supplierInspectionNos',
          formItems: INSPECTION_FORM_ITEMS,
          columns: INSPECTION_TABLE_COLUMNS,
          associateKey: 'reportCode',
          loadData: this.loadSupplierInspectionList,
          notCheck: true, // 不校验单号
        },
        {
          label: '商品准入单据单号',
          prop: 'productAccessRecordNos',
          formItems: ACCESS_FORM_ITEMS,
          columns: ACCESS_TABLE_COLUMNS,
          loadData: this.loadProductAccessRecordList,
        },
        {
          label: 'SPU新增SKU单据号',
          prop: 'spuAddSkuRecordNos',
          formItems: ACCESS_FORM_ITEMS,
          columns: ACCESS_TABLE_COLUMNS,
          loadData: this.loadSpuAddSkuRecordList,
        },
        {
          label: '多供进价单据单号',
          prop: 'addMultiSuppliesRecordNos',
          formItems: PRICE_FORM_ITEMS,
          columns: PRICE_TABLE_COLUMNS,
          loadData: this.loadAddMultiSuppliesRecordList,
        },
        {
          label: '新增销售区域单据单号',
          prop: 'addSaleAreaRecordNos',
          formItems: PRICE_FORM_ITEMS,
          columns: PRICE_TABLE_COLUMNS,
          loadData: this.loadAddSaleAreaRecordList
        },
      ],
    }
  },
  methods: {
    // 加载供应商考察报告弹框列表
    async loadSupplierInspectionList ({ formData, paginationParams }, loadingFn) {
      const data = { ...formData, ...paginationParams }
      const res = await getSupplierInspectionPagerService(data, loadingFn)
      return [res?.retData?.results ?? [], res?.retData?.totalNum ?? 0]
    },
    // 加载商品准入单据单号弹框列表
    async loadProductAccessRecordList ({ formData, paginationParams }, loadingFn) {
      return this.fetchRecordPager({
        formData,
        paginationParams,
        loadingFn,
        commitTypes: ['PREPARE'],
      })
    },
    // 加载SPU新增SKU单据单号弹框列表
    async loadSpuAddSkuRecordList ({ formData, paginationParams }, loadingFn) {
      return this.fetchRecordPager({
        formData,
        paginationParams,
        loadingFn,
        commitTypes: ['ADDSKU'],
      })
    },
    // 加载多供进价单据单号弹框列表
    async loadAddMultiSuppliesRecordList ({ formData, paginationParams }, loadingFn) {
      return this.fetchSpuList({
        formData,
        paginationParams,
        loadingFn,
        commitType: 'supplyMorePrice,supplyMoreSteelPrice',
      })
    },
    // 加载新增销售区域单据单号弹框列表
    loadAddSaleAreaRecordList ({ formData, paginationParams }, loadingFn) {
      return this.fetchSpuList({
        formData,
        paginationParams,
        loadingFn,
        commitType: 'addSupplySaleArea,alignmentSupplySaleArea'
      })
    },
    async fetchRecordPager (configs) {
      const data = {
        commitState: 'OK',
        commitTypes: configs?.commitTypes,
        ...(configs?.formData ?? {}),
        ...(configs?.paginationParams ?? {})
      }
      const res = await getRecordPagerService(data, configs?.loadingFn)
      return [res?.retData?.results ?? [], res?.retData?.totalNum ?? 0]
    },
    async fetchSpuList (configs) {
      const recombineFormItems = [
        ...PRICE_FORM_ITEMS,
        { prop: 'commitType', searchType: 'IN' },
        { prop: 'commitState', searchType: 'EQ' }
      ]
      const recombineFormData = {
        ...(configs?.formData ?? {}),
        commitType: configs?.commitType,
        commitState: 'OK'
      }
      const searchParam = getSearchParamBySearchType(recombineFormItems, recombineFormData)
      const data = {
        searchParam: JSON.stringify(searchParam),
        ...(configs?.paginationParams ?? {})
      }
      const res = await querySpuListService(data, configs?.loadingFn)
      return [res?.retData?.results ?? [], res?.retData?.totalNum ?? 0]
    },
    // 更新表单对应选择单号数据
    updateFormNos (prop, recordNos) {
      this.formData[prop] = recordNos
    },
    // 校验选择单号必填
    validateSelectRecordNos () {
      const checkList = this.sourceList.filter(item => !item.notCheck) // 需要校验的列表
      const isNull = checkList.every(item => !this.formData[item.prop] || this.formData[item.prop].length == 0)
      if (isNull) return this.$message.warning('请至少选择一个单号')
    },
    // 获取开发完成表单结果
    getResults () {
      if (!this.formData.result) {
        this.$message.warning('开发结果不能为空')
        return false
      }
      if (this.validateSelectRecordNos()) return false
      return this.formData ?? {}
    }
  }
}
</script>
